<template>
    <div class="app-container">

        <!-- 第一部分：标注数据选择 -->
        <el-card class="box-card">
            <template #header>
                <div class="clearfix">
                    <span>Select Record</span>
                </div>
            </template>
            <!--选择数据源-->
            <el-form :inline="true" class="demo-form-inline">
                <!--选择需要标注的状态： checked/non-checked/not sure-->
                <el-form-item label="Status">
                    <el-select v-model="selectedStatus" placeholder="Select Status" size="mini" clearable>
                        <el-option v-for="status in dict.type.status" :key="status.value" :label="status.label"
                            :value="status.value" />
                    </el-select>
                </el-form-item>

                <!--随机数据集按钮-->
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="randomOneAdeKnowledge"
                        :loading="nexting">
                        Next
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
                <!--左侧区域：展示相似ADE案例知识-->
                <el-card shadow="hover">
                    <template #header>
                        <div>
                            <span>
                                Current Record&nbsp;&nbsp;&nbsp;&nbsp;
                                <dict-tag style="display: inline" :options="dict.type.status"
                                    :value="adeknowledge.status" />
                            </span>

                        </div>
                    </template>

                    <!--带有标注标签的病历文书内容展示-->
                    <div v-html="emrContent" class="annotated-text"></div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <!--右侧区域展示：当前的ADE案例知识-->
                <el-card shadow="hover">
                    <template #header>
                        <div>
                            <span>
                                ADE Knowledge Record
                                <dict-tag style="display: inline" :options="dict.type.status"
                                    :value="adeknowledge.status" />
                            </span>

                        </div>
                    </template>

                    <!--带有标注标签的病历文书内容展示-->
                    <div class="json-editor-container">
                        <el-input type="textarea" v-model="adeknowledge.text" :rows="3"
                            style="font-size: 12px;margin-bottom: 10px;" />
                        <el-input type="textarea" v-model="jsonText" :rows="15" style="font-size: 12px"
                            placeholder="Pls input json data(ades)" @input="validateJson" />

                        <div class="json-status mt-2">
                            <el-tag :type="jsonValid ? 'success' : 'danger'" effect="plain" size="mini">
                                {{ jsonStatusText }}
                            </el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>

        </el-row>

        <!-- 底部操作区 -->
        <el-footer style="margin-top: 10px; ">
            <el-row type="flex" justify="end">
                <el-button type="warning" class="ml-3" @click="saveRecord('2')" :loading="saving">
                    Not Sure
                </el-button>
                <el-button type="primary" class="ml-3" @click="saveRecord('0')" :loading="saving">
                    UnChecked
                </el-button>
                <el-button type="success" class="ml-3" @click="saveRecord('1')" :loading="saving">
                    Checked
                </el-button>
            </el-row>
        </el-footer>


    </div>
</template>

<script>
import { randomAdeKnowledge, updateAdeKnowledge,getAdeKnowledge } from "@/api/ade/AdeKnowledge";

export default {
    name: "EmrRecordEditor",
    dicts: ["status"],
    data() {
        return {
            selectedStatus: "0", // 选择的状态
            nexting: false, // 控制按钮加载状态

            adeknowledge: {}, // 存储随机获取的ADE Knowledge数据
            // JSON数据
            jsonText: "",
            jsonValid: true,
            jsonStatusText: "JSON Format Correct",
        };
    },
    created() {
        this.randomOneAdeKnowledge();
    },
    methods: {
        //更新状态
        saveRecord(status) {
            var data = {
                id: this.adeknowledge.id,
                status: status,
                ade: this.jsonText,
                text: this.adeknowledge.text,
            };
            updateAdeKnowledge(data).then(response => {
                this.$message.success("Record updated successfully!");

                getAdeKnowledge(this.adeknowledge.id).then(response => {
                    this.adeknowledge = response.data;
                    this.jsonText = this.adeknowledge.ade;
                    this.formatJson(); // 格式化JSON数据
                }).catch(() => {
                    this.$message.error("Error occurred while fetching updated record!");
                });
            }).catch(() => {
                this.$message.error("Error occurred while updating record!");
            });
        },
        // 随机获取一条ADE Knowledge数据
        randomOneAdeKnowledge() {
            this.nexting = true;
            randomAdeKnowledge({ status: this.selectedStatus }).then(response => {
                if (response.data == null || response.data == undefined) {
                    this.$message.warning(
                        "No aviliable data!"
                    );
                    this.nexting = false;
                    return;
                }

                this.adeknowledge = response.data;
                this.jsonText = this.adeknowledge.ade;
                this.formatJson(); // 格式化JSON数据
                console.log("Random ADE Knowledge:", this.adeknowledge);
                this.nexting = false;
            }).catch(() => {
                this.nexting = false;
            });
        },
        // 格式化JSON
        formatJson() {
            try {
                const parsed = JSON.parse(this.jsonText);
                this.jsonText = JSON.stringify(parsed, null, 2);
                this.jsonValid = true;
                this.jsonStatusText = "JSON Format Correct!";
            } catch (error) {
                this.jsonValid = false;
                this.jsonStatusText = `Wrong Format: ${error.message}`;
                this.$message.error("JSON Format Wrong，Can not be formatted!");
            }
        },
    }
}
</script>